<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;}
        .imgbox .item{width:400px;height:200px;font-size: 80px;line-height:200px;text-align:center;display: none;}
        .item:nth-child(1){background: #399;}
        .item:nth-child(2){background: #393;}
        .item:nth-child(3){background: #993;}
        .item:nth-child(4){background: #939;}
        .item:nth-child(5){background: #339;}

        .btns input{position: absolute;width:40px;height:40px;top:80px;}
        #left{left:0;}
        #right{right:0;}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
        <div class="btns">
            <input type="button" value="<" id="left">
            <input type="button" value=">" id="right">
        </div>
    </div>
</body>
<script>
    // 选择器
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var items = document.querySelectorAll(".item");
    // 设置默认索引
    var index = 0;
    // 根据默认索引，显示对应内容
    items[index].style.display = "block";

    // 绑定右按钮的点击事件
    right.onclick = function(){
        // 修改索引之前，先隐藏老索引对应的内容
        items[index].style.display = "none";

        // 修改索引
        if(index === 4){
            index = 0;
        }else{
            index++;
        }

        // 根据修改后的索引，显示对应的内容
        items[index].style.display = "block";
    }
</script>
</html>